<template>
  <el-drawer :title="title" :visible.sync="fileDrawerVisible" :withHeader="false" size="50%">
    <div id="fileDrawer">
      <h1>{{ title }}</h1>
      <el-table :data="fileList" :load="loadFile" :row-key="fileRowKey"
                :tree-props="{children: 'children', hasChildren: 'hasChildren'}" border lazy
                size="mini"
                style="width: 100%">
        <el-table-column label="文件" prop="fileName" show-overflow-tooltip/>
        <el-table-column :formatter="fileTypeFormat" label="类型" prop="fileType" width="100"/>
        <el-table-column :formatter="fileSizeFormat" label="大小" prop="size" width="100"/>
        <el-table-column label="修改" prop="modifyTime" width="150"/>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button v-if="scope.row.fileType==2" :key="scope.row.fileName" :loading="scope.row.loading" size="small"
                       type="text"
                       @click="downloadFile(scope.row)">下载
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-drawer>
</template>
<script>

export default {
  props: {
    title: [String],
    load: [Function],
    download: [Function],
  },
  data() {
    return {
      loadings: [],
      loading: false,
      fileDrawerVisible: false,
      fileList: [],
    };
  },
  methods: {
    fileTypeFormat(row) {
      if (row.fileType == 1) return "目录";
      if (row.fileType == 2) return "文件";
      if (row.fileType == 3) return "连接";
    },
    fileSizeFormat(row) {
      let size = row.size;
      let unit = 'B'
      if (size > 1024) {
        size = size / 1024;
        unit = "KB";
      }
      if (size > 1024) {
        size = size / 1024;
        unit = "M";
      }
      if (size > 1024) {
        size = size / 1024;
        unit = "G";
      }
      return size.toFixed(2) + unit;
    },
    fileRowKey(row) {
      return row.fileDir + row.fileName
    },
    async loadFile(tree, treeNode, resolve) {
      let list = await this.sshFileList(this.getFileFullName(tree));
      resolve(list);
    },
    getFileFullName(fileInfo) {
      return fileInfo.fileDir + (fileInfo.fileName.indexOf("/") == 0 ? fileInfo.fileName : ("/" + fileInfo.fileName))
    },
    async sshFileList(dir) {
      let list = await this.load(dir);
      for (let i in list) {
        list[i].hasChildren = (list[i].fileType == 1);
      }
      return list;
    },
    downloadFile(fileInfo) {
      this.$set(fileInfo, 'loading', true)
      this.download(this.getFileFullName(fileInfo))
          .then((res) => {
            let blob = res.data;
            const downloadElement = document.createElement('a');
            const href = window.URL.createObjectURL(blob);
            let contentDisposition = res.headers['content-disposition'];
            let filename = contentDisposition.split("=")[1];

            if (filename.indexOf("/") >= 0) {
              filename = filename.substr(filename.lastIndexOf("/") + 1);
            }
            console.log(filename)
            filename = decodeURI(filename);
            downloadElement.style.display = 'none';
            downloadElement.href = href;
            downloadElement.download = filename; //下载后文件名
            document.body.appendChild(downloadElement);
            downloadElement.click(); //点击下载
            document.body.removeChild(downloadElement); //下载完成移除元素
            window.URL.revokeObjectURL(href); //释放掉blob对象
            this.$set(fileInfo, 'loading', false)
          })
          .catch(() => this.$set(fileInfo, 'loading', false))
      ;
    },
    async openDrawer(dir) {
      this.fileDrawerVisible = true;
      this.fileList = [];
      this.fileList = await this.sshFileList(dir);
      // this.fileList.map(f => f.loading = false);
    },
  },
};
</script>
<style scoped>
#fileDrawer {
  padding: 10px;
}

#fileDrawer h1 {
  padding: 10px;
}


/deep/ .el-drawer {
  overflow: auto;
}

</style>
